import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入vant轻提示
import { Toast } from 'vant'
// 导入Vuex
import store from '../store'
// 导入token工具函数
import { getToken, removeToken } from '@/utils/token.js'
// 导入接口
import { getUserInfo } from '@/api/myApi.js'

Vue.use(VueRouter)

const routes = [
  // 路由的重定向
  {
    path: '/',
    redirect: '/company'
  },
  // 登录
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login'),
    meta: {
      title: '登录'
    }
  },
  // 公司
  {
    path: '/company',
    name: 'company',
    component: () => import('../views/company'),
    meta: {
      showTabbar: true, // 是否显示底部标签栏
      title: '公司'
    }
  },
  // 刷题
  {
    path: '/question',
    name: 'question',
    component: () => import('../views/question'),
    meta: {
      showTabbar: true,
      title: '刷题'
    }
  },
  // 发现
  {
    path: '/find',
    name: 'find',
    component: () => import('../views/find'),
    meta: {
      showTabbar: true,
      title: '发现'
    }
  },
  // 我的（个人中心）
  {
    path: '/my',
    name: 'my',
    component: () => import('../views/my'),
    meta: {
      showTabbar: true,
      title: '我的',
      needLogin: true // 是否需要登录
    }
  },
  // 个人资料
  {
    path: '/myInfo',
    name: 'myInfo',
    component: () => import('../views/myInfo'),
    meta: {
      title: '个人资料',
      needLogin: true // 是否需要登录
    }
  },
  // 修改个人信息
  {
    path: '/editInfo',
    name: 'editInfo',
    component: () => import('../views/myInfoEdit'),
    meta: {
      title: '个人信息',
      needLogin: true
    }
  },
  // 我的消息
  {
    path: '/myMessage',
    name: 'myMessage',
    component: () => import('../views/myMessage'),
    meta: {
      title: '我的消息',
      needLogin: true
    }
  }
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
]

const router = new VueRouter({
  routes
})

// 全局前置导航守卫
// to-即将进入的路由对象；from-当前离开的路由对象；next-结束的方法
router.beforeEach(async (to, from, next) => {
  // 获取路由信息
  // console.log(to.meta)
  if (to.meta.needLogin) {
    // 1.需要登陆
    if (store.state.isLogin) {
      // 2.登录了
      next()
    } else {
      // 2.没有登陆
      if (getToken()) {
        // 3.有token
        try {
          const res = await getUserInfo()
          // console.log(res)
          // 4.token正确
          if (res.data.code === 200) {
            // 保存用户信息
            store.commit('CHANGEUSERINFO', res.data.data)
            // 修改登录状态
            store.commit('CHANGEISLOGIN', true)
            // 继续访问
            next()
          } else {
          // 4.token不正确
            removeToken() // 清除token
            Toast('请先登录！') // 轻提示
            next('/login') // 跳转到登录页
          }
        } catch (err) {
          console.log(err)
        }
      } else {
        // 3.没有token
        Toast('请先登录！') // 轻提示
        next('/login') // 跳转到登录页
      }
    }
  } else {
    // 1.不需要登录-直接放行访问页面
    next()
  }
})
// 全局后置导航守卫
router.afterEach((to, from) => {
  // 设置页面的title属性
  document.title = to.meta.title
})

export default router
